 <meta charset="UTF-8">
<style>
.nav{width:12px;}
	.nav-circle{width:14px;height:14px;border-radius:7px;border:1px solid #fff;text-align: center;vertical-align: middle;margin:2rem;line-height: 14px;}
	.nav-circle.active{width:14px;height:14px;border-radius:7px;border:1px solid #b27499;text-align: center;vertical-align: middle;margin:2rem;line-height: 14px;}
	.nav-fullCircle .active{width:10px;height:10px;border-radius:5px;background:#b27499;margin: 2px;}
	.nav-fullCircle {width:10px;height:10px;border-radius:5px;background:#000;margin: 2px;}
	.circleText{width:150px;}
</style>

<div class="nav">
	<div class="nav-circle active">
		<div class="nav-fullCircle active">s</div>
		
	</div>
	<div class="nav-circle">
		<div class="nav-fullCircle"></div>
	</div>
	<div class="nav-circle">
		<div class="nav-fullCircle"></div>
	</div>
	<div class="nav-circle">
		<div class="nav-fullCircle"></div>
	</div>
	<div class="nav-circle">
		<div class="nav-fullCircle"></div>
	</div>
</div>